<template>
  <div>
    <el-header style="height: 50px;">
      <Personinfo style="height: 50px;"></Personinfo>
    </el-header>
    <el-divider style="margin: 0;padding: 0;"></el-divider>
    <el-row style="background-color: #f4f2f5">
      <el-image style="margin-left: 200px;width: 200px;height: 150px;" :src="logo_url"></el-image>
    </el-row>
    <el-row style="width: 100%;background-color: #f0ffff;background-size:100% 100%;">
         <el-card class="box-card" style="width: 800px">
           <div slot="header" class="clearfix">
             <span>个人注册</span>
           </div>
            <el-form ref="form" :model="form" :rules="rules" style="margin: 20px 0px;width: 800px" label-width="140px" size="mini">
              <el-form-item label="账号" prop="userName">
                <el-input v-model="form.userName"  placeholder="请输入手机号/邮箱/用户名" suffix-icon="el-icon-user" style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入用户密码" suffix-icon="el-icon-lock" type="password" @blur="check" style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col style="width: 80px;">密码强度：</el-col>
                  <el-col style="width: 80%" >
                    <el-steps :space="200" :active="strong" finish-status="success">
                      <el-step title="弱"></el-step>
                      <el-step title="中"></el-step>
                      <el-step title="强"></el-step>
                    </el-steps>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="确认密码" prop="password2"  >
                <el-input v-model="form.password2" placeholder="请输入用户密码" suffix-icon="el-icon-lock"  type="password" style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="validateCode">
                <el-input v-model="form.validateCode" placeholder="验证码" style="width: 330px;height: 30px;margin: -8px 1px;"></el-input>
                <el-image style="width: 60px;height: 30px;margin: -10px 3px;" @click="refreshCode"
                          :src="captchaUrl"
                ></el-image>看不清？<el-link :underline="false" @click="refreshCode">换一张</el-link>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col style="width: 100px;">
                    <el-checkbox-group v-model="form.read">
                      <el-checkbox label="我已阅读" name="type"></el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                  <el-col style="width: 200px;margin-left: 0px;">
                    <el-link :underline="false">《注册协议》,并自愿遵守该协议</el-link>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="submit" style="width: 300px;background-color: #dcdfe6" @click="register">立即注册</el-button>
              </el-form-item>
            </el-form>
          </el-card>
    </el-row>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import Header from "./components/Header";
import Personinfo from "../Personinfo";
import * as user from "./../../api/user"
import {CheckUserName, PersonalRegister} from "./../../api/user";
import {checkStrong} from "../../assets/util";
import instance from "../../api";


export default {
  name: "PersonalReg",
  components: {footerx,Header,Personinfo},
  data (){
    let validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      }  else {
        if (this.form.password !== '') {
          this.$refs.form.validateField('password2');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };


    return {
      activeNames: ['1','2','3'],
      strong:'1',
      form:{userName:"",password:'',password2:'',validateCode:'',read:true},
      logo_url:'./static/logo2.png',
      activeName:'first',
      captchaUrl:this.getCaptchaUrl(),
      rules:{
        userName:[
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator:validatePass1, trigger: 'blur'}
        ],
        password2:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator:validatePass2, trigger: 'blur'}
        ],
        validateCode:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    handleOpen(key, keyPath){
      console.log(key, keyPath);
    },
    getCaptchaUrl(){
      return instance.defaults.baseURL+'/captcha/captchaImage?type=math&s='+new Date().getTime() ;
    },
    refreshCode(){
      this.captchaUrl = this.getCaptchaUrl();
    },
    handleClose(key, keyPath){
      console.log(key, keyPath);
    },
    handleChange(val) {
      console.log(val);
    },
    register(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          CheckUserName.r({userName:this.form.userName}).then(d=>{
            if(d.data.code === 0){
              PersonalRegister.r({userName:this.form.userName,
                password:this.form.password,
                password2:this.form.password2,
                validateCode:this.form.validateCode,read:true}).then(d=>{
                this.$router.push("login");
              });
            }else{
              this.$message(d.data.msg);
            }
          })
        }
      });
    },
    check(){
      this.strong = checkStrong(this.form.password)+"";
    }
  }
}
</script>

<style scoped>
.myCcontainer{
  background: azure;
  width: 1200px;
}
/deep/ .el-divider--horizontal{
  margin: 0;
  padding: 0;
}
</style>